<template>
  <div class="debounceThrottle">
    <h1>防抖debounce(连续触发后只执行最后一次)</h1>
    <pre>
            <code>
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timer = setTimeout(fn,delay) 
        }else{
            timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}
            </code>
        </pre>
    <h1>节流throttle(在指定时间间隔中触发一次)</h1>
    <pre>
            <code>
function throttle(fn,delay){
    let valid = true
    return function() {
    if(!valid){
        //休息时间 暂不接客
        return false 
    }
    // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
            </code>
        </pre>
  </div>
</template>

<script>
export default {}
</script>

<style>
.debounceThrottle {
}
</style>
